<div class="navbar navbar-fixed-top">
    <div class="navbar-inner">
        <div class="container">
            <div class="nav-collapse collapse">
                    <a href="#" class="btn"><i class="icon-home"></i></a>
                    <span class="brand">{{month|i18n}} {{year}}</span>
                    <a href="#rowModal" class="btn" role="button"  data-toggle="modal"><i class="icon-plus"></i></a>
            </div>
        </div>
    </div>
</div>
<table class="table table-bordered table-hover table-scrollable">
    <thead>
        <tr>
            <th rowspan="2">{{'row.day'|i18n}}</th><th rowspan="{{recipes.length}}">{{'row.label'|i18n}}</th><th colspan="{{expenses.length}}">{{'recipe'|i18n}}</th><th colspan="3">{{'expense'|i18n}}</th>
        </tr>
        <tr>
            <th ng-repeat="recipe in recipes">{{recipe.categoryName}}</th>
            <th ng-repeat="expense in expenses">{{expense.categoryName}}</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="row in accountings">
            <td>{{row.date}}</td>
            <td>{{row.label}}</td>
            <td ng-repeat="recipe in recipes"><span ng-if="row.categoryId == recipe.id">{{row.amount}}</span></td>
            <td ng-repeat="expense in expenses"><span ng-if="row.categoryId == expense.id">{{row.amount}}</span></td>
        </tr>
    </tbody>
</table>
<!--
<table class="table table-bordered table-hover table-scrollable">
    <thead style="background:#F5F5F5;">
        <tr>
            <th rowspan="2">{{'row.day'|i18n}}</th><th rowspan="2">{{'row.label'|i18n}}</th><th colspan="2">{{'recipe'|i18n}}</th><th colspan="3">{{'expense'|i18n}}</th>
        </tr>
        <tr>
            <th>Recette 1</th><th>Recette 2</th><th>Dépense 1</th><th>Dépense 2</th><th>Dépense 3</th>
        </tr>
    </thead>
    <tfoot style="background:#F5F5F5;">
        <tr><td colspan="2"></td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5000</td></tr>
    </tfoot>
    <tbody>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5000</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5001</td></tr>
        <tr><td>01/01</td><td>test</td><td>1000</td><td>1000</td><td>5000</td><td>5000</td><td>5002</td></tr>
    </tbody>
</table>
-->

<div class="navbar navbar-fixed-bottom">
    <div class="navbar-inner">
        <div class="container">
            <ul class="nav">
                <li ng-repeat="amonth in store.months" ng-class="{active: month==amonth}"><a ng-href="#accounting/{{year}}/{{amonth}}">{{amonth | i18n}}</a></li>
            </ul>
        </div>
    </div>
</div>


<div id="rowModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="rowModalLabel" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 id="rowModalLabel">{{month|i18n}} {{year}}</h3>
    </div>
    <form name="rowForm" ng-submit="add()" class="form-horizontal" novalidate>
        <div class="modal-body">
            <div class="control-group">
                <label class="control-label">{{'row.day'|i18n}}</label>
                <div class="controls">
                    <input type="number" maxlength="2" name="rowDay" ng-model="row.day" min="1" max="31" integer required>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{'row.label'|i18n}}</label>
                <div class="controls">
                    <input type="text" maxlength="100" name="rowLabel" ng-model="row.label" required>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{'row.amount'|i18n}}</label>
                <div class="controls">
                    <input type="text" maxlength="8" name="rowAmount" ng-model="row.amount" ng-pattern="/^\d+((\.|\,)\d+)?$/" pattern="^\d+((\.|\,)\d+)?$" required>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{'row.type'|i18n}}</label>
                <div class="controls">
                    <select name="rowType" ng-model="type">
                        <option value="recipe" selected="selected">{{'recipe'|i18n}}</option>
                        <option value="expense">{{'expense'|i18n}}</option>
                    </select>
                </div>
            </div>
            <div class="control-group">
                <label class="control-label">{{'row.category'|i18n}}</label>
                <div class="controls">
                    <select name="rowCategoryId" ng-model="row.categoryId" required>
                        <option></option>
                        <option ng-repeat="recipe in recipes|filter:type" value="{{recipe.id}}">{{recipe.categoryName}}</option>
                        <option ng-repeat="expense in expenses|filter:type" value="{{expense.id}}">{{expense.categoryName}}</option>
                    </select>
                </div>
            </div>
        </div>
        <div class="modal-footer">
            <a tabindex="-1" class="btn" data-dismiss="modal" aria-hidden="true">{{'cancel'|i18n}}</a>
            <button class="btn btn-primary" type="submit" ng-disabled="rowForm.$invalid">{{'save'|i18n}}</button>
        </div>
    </form>
</div>
